今天的內容將著重在版面配置,利用這些屬性,可以讓一個網頁,從完全空白到能清楚的區分網頁中各種功能的區塊。
border
(邊框)屬性,可以使用background
屬性設定多種值,或另外以個別屬性做設定,這邊介紹常用的幾種:
background-color
可以設定背景顏色,值為顏色名稱、16進位制、rgba表示法。background-image
是將圖片設定為目標區域的背景,必須在屬性內加入url("圖片位址")
,位址可以是本機圖片或網路上的圖片。background-repeat
用於背景的重複形態,由於瀏覽器會預設將背景圖片重複填滿目標區域,若不希望重複,需要另外做調整。background-size
用來調整背景尺寸,值可為%
(原圖的百分比)、寬 高
(設定背景的寬和高,若只給一個數值則為寬的長度、高為自動)、cover
(以較短的一邊等比放大至填滿背景)、contain
(維持原圖大小)。background
後可同時設定多種值,不必按順序為:bg-img
、repeat-style
、position
/bg-size
(背景尺寸必須緊鄰repeat
之後並用/
隔開);background-color
必須在最後。<!-- HTML -->
<body></body>
<!-- CSS -->
body {
background: top/cover no-repeat url("https://i.ytimg.com/vi/Gy0muvjik6w/maxresdefault.jpg");
}
border
(邊框)、padding
、margin
,HTML中所有元素的內外距都有預設值。padding
為內距,從邊框往內至元素的垂直距離,有幾種寫法:
padding: XX;
,若只給一個值,則會設定為四邊相同的內距。padding: XX XX XX;
,給三個值,依序為上方、左=右、下方距離。padding: XX XX XX XX;
,給四個值,依序為上方、右方、下方、左方距離。padding-top
、padding-bottom
、padding-left
、padding-right
。margin
為外距,從邊框往外的垂直距離,寫法與padding
相同,將padding
改為margin
即可。<!-- HTML -->
<div id="container">
<div id="box">padding</div>
</div>
<!-- CSS -->
#container {
background: yellow;
padding: 15px 20px 15px;
}
#box {
background: blue;
color: #FFF;
padding: 15px 20px 15px;
margin: 20px 15px 10px 30px;
border: 5px solid green;
}
class
屬性中,越後方的值,優先等級越高。!important
,則該屬性將會最優先被顯示來。!important > 標籤內style > id選擇器屬性 > class選擇器後方值 > class選擇器前方值 > 標籤選擇器屬性值 > 繼承父元素的值
。<!-- HTML -->
<h1 id="orange-text" class="pink-text blue-text" >Hello Everybody!</h1>
<!-- CSS -->
body {
background-color: black;
font-family: monospace;
color: green;
}
h1{
color: red;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
對於自學的人來說,該如何設定每一個元素和版面的配置,都是一件困難的事。
我認為這可以透過許多的練習來練手感。所以這邊建議可以嘗試用自己學過的語法慢慢做出一個網頁的外觀。
不管是透過教學網站、影片或是臨摹某個網站,都是很好的方式。
最後,期望自己能與大家一起進步!
內容來源:
freeCodeCamp|勞贖圖|CodePen